<!DOCTYPE html>
	<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
		<link href="resources/css/mui.min.css" rel="stylesheet" />
		<link href="resources/css/common1.css" rel="stylesheet" />
		<link href="resources/css/swiper.css" rel="stylesheet" />
		<script src="resources/js/swiper.js"></script>
		<script src="resources/js/jquery-1.10.1.min.js"></script>
		<script src="resources/js/common.js"></script>
		<script src="resources/js/mui.min.js"></script>
		<script src="resources/js/vue.min.js"></script>
		<script src="resources/js/WebViewJavascriptBridge.js"></script>
		<title>现金雷达- 首页</title>
		<style>
			.swiper-container {	width: 100%; height: auto;margin-left: auto;		      margin-right: auto;		    }
		    .swiper-slide {	 text-align: center;	font-size: 18px;		      background: #fff;		      margin-right: 2px !important;		      display: -webkit-box;		      display: -ms-flexbox;		      display: -webkit-flex;		      display: flex;		      -webkit-box-pack: center;		      -ms-flex-pack: center;		      -webkit-justify-content: center;		      justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
		    .swiper-slide img{width: 100%; height: auto;}
		    .headerScherBox{width: 100%; position: fixed; top: 0px; z-index: 999; height: 60px;padding: 0px 10px; background-color: #FFFFFF;}
		    .headerScherBox2{width: 100%; position: fixed; top: 0px; z-index: 999; height: 60px;padding: 0px 10px; background-color: #2487ff;}
		    .headerScher{ height:30px; border-radius: 15px; line-height: 30px; margin-top: 15px; background-color: #eee; position: relative; width:90%; float: left;}
			.headerScher input{width: 95%;border-radius: 15px; font-size: 12px; background-color: #eee; height: 100%; line-height: 100%; border: 0px; padding-left: 32px;}
			.headerScher img{position: absolute; width: 18px; left: 10px; top:6px;}
			.headerScherBox2 .headerScher{ height:30px; border-radius: 15px; line-height: 30px; margin-top: 15px; background-color: #fff; position: relative; width:90%; float: left;}
			.headerScherBox2 .headerScher input{width: 95%;border-radius: 15px; font-size: 12px; background-color: #ffffff; height: 100%; line-height: 100%; border: 0px; padding-left: 32px;}
			
			.headerMsg{width: 10%; height: 60px; float: left; text-align: right;}
			.headerMsg img{width: 28px;  margin-top: 16px;}
			.listLogo{background-color: #fff; padding-top: 10px;}
			.listLogo img{width: 60%;}
			.listLogo .mui-row{ text-align: center; border-bottom: 1px solid #eee;}
			.marqueeBox{width: 100%; padding: 0px 10px; height: 40px; line-height: 40px;}
			.marqueeLogo{float: left; padding-left: 22px; position: relative; width: 60px; height: 40px; background-color: #fff;}
			.marqueeLogo img{ width: 18px; left: 0px; top:10px;  position: absolute; margin-right: 5px;}
			.marqueeTit{ width:calc(100% - 60px); float: left; height: 24px; margin-top: 8px; overflow: hidden;}
			.marqueeTit marquee{width: 100%; line-height: 24px;}
			.marqueeTit marquee p{margin: 0; width: 100%; padding: 0; height: 25px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
			.marqueeTit marquee span{padding-right: 20px;}
			.newTit2 span{font-size: 12px; border:1px solid #EEEEEE; color: #6c747d; padding: 2px 3px; margin-right: 15px;}
			
			.moreTit{margin-right: 30px; font-size: 12px; margin-top: 1px;}
			.newTit{margin-right: 15px; font-size: 12px; margin-top: 1px;}
			.newDeail{text-align: center; padding: 8px 0px;}
			.newDeail p{ margin-bottom: 0px; height: 20px;}
			.hotTit img, .newImg{border-radius: 3px;}
			.headerTop{ height: 60px;}
			
			.logoTit{text-align: center; padding-left: 0px;}
			.logoTitImg{ width: 50px; height: 50px;}
			.mui-table-view-cell:after{background-color:#fff;}
			
			
			.people{ padding-left: 15px;}
			.newList {margin-left: 15px; border-bottom:1px solid #efefef;}
			.newListRight{padding-top: 4px;}
			.fontS17{font-size:17px;}
			.fontS16{font-size:16px;}
			.fontS15{font-size:15px;}
			.logoTit p{ width: 100%;}
			.hr{width: 5px; left:0px; height: 70px; position: absolute; top:17px; border-left:1px solid #efefef;}
			.newListTit:after{background-color:#efefef;}
			
		</style>

	</head>

	<body>
		<div id="app">
			<div class="headerScherBox">
				<div class="headerScher">
					<input type="text" id="keyword" @keyup.13="show($event)"  placeholder="请输入"><img src="resources/images/indexSeach.png"></div>
				<div class="headerMsg"><img src="resources/images/indexMsg.png"></div>
			</div>
			<div class="headerTop"></div>

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="resources/images/cdBanner.png"></div>
					<div class="swiper-slide"><img src="resources/images/banner2.jpg"></div> 
				</div>
				<!-- Add Pagination 轮播-->
				<div class="swiper-pagination">
					<span  v-for="swiper in swiperList" class="swiper-pagination-bullet"></span>
				</div>
			</div>
			<div class="mui-content listLogo">
				<div class="mui-row">
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexjs.png">
							<p class="color3">快速审核</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexzx.png">
							<p class="color3">通过率高</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexzm.png">
							<p class="color3">急速放款</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexLx.png">
							<p class="color3">省钱省事</p>
						</a>
					</div>
				</div>
				<div class="marqueeBox">
					<div class="marqueeLogo"><img src="resources/images/indexmsgNotice.png">速报</div>
					<div class="marqueeTit">
						<marquee direction="left" scrolldelay="0" scrollamount="5" loop="-1">
							<span v-for="(marqueeTxt,index) in marqueeList">{{marqueeTxt}}</span>
						</marquee>
					</div>
				</div>
			</div>
			<!--新人专享-->
			<!-- <template v-for="(green,index) in greenHandList"> 
			<template v-if="index < 1">
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right"  href="searchList.html?id=recommend">
							<b class="font-size14">新人专享</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a :href="'loanDetails.html?id='+green.id">
							<img class="mui-media-object mui-pull-left newImg" :src="green.iconUrl">
							<div class="mui-media-body font-size14">
								{{green.name}}
								<span class="mui-pull-right newTit color4"><i class="color2">{{green.totalApplyCount}}</i>人申请通过</span>
								<p class='mui-ellipsis newTit2'><span>10秒审核</span><span>快速下款</span><span>芝麻分贷</span>
									<template v-for="(greenTag,index) in greenTags"> 
										<template v-if="index < 3">
											<span>{{greenTag}}</span>
										</template>
									</template>
								</p>
							</div>
						</a>
					</li>
					<li class="mui-row">
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color3">最高额度</p>
							<p class="color2">{{green.averageqQuota}}元</p>
						</div>
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color4">月参考利息</p>
							<p class="color3">{{green.interestRate30}}%</p>
						</div>
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color4">放款时间</p>
							<p class="color3">{{green.averageApplyTime}}小时</p>
						</div>
					</li>
				</ul>
			</div>
			</template>
			</template> -->
			<!--热门推荐-->
			<!-- <div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right"   href="searchList.html?id=hot">
							<b class="font-size14">热门推荐</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<li class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-table-view-cell mui-media hotTit" v-for="(hot,index) in hotList">
							<template v-if="(index+1) <= 4">
								<a :href="'loanDetails.html?id='+hot.id">
									<img class="mui-media-object mui-pull-left"  :src="hot.iconUrl">
									<div class="mui-media-body font-size14">
										{{hot.name}}
										<p class='mui-ellipsis'>最高额度<span class="color2">{{hot.averageqQuota}}元</span></p>
									</div>
								</a>
							</template>
						</div>
					</li>
				</ul>
			</div> -->

			<!--新品推荐-->
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell newListTit">
						<a class="mui-navigate-right"   href="searchList.html?id=latest">
							<b class="font-size14">新品推荐</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<template v-for="(latest,index) in latestList">
					<template  v-if="(index+1) <= 6">
					<a  :href="'loanDetails.html?id='+latest.id">
					<li class="newList mui-row" >
						<div class="logoTit mui-col-sm-4 mui-col-xs-4 mui-table-view-cell mui-media">
							<img class="logoTitImg"  :src="latest.iconUrl">
							<p class="color3 fontS15">{{latest.name}}</p>
						</div>
						<div class="mui-col-sm-8 mui-col-xs-8 mui-table-view-cell mui-media">
							<div class="mui-row">
								<div class="mui-col-sm-6 newListRight mui-col-xs-6 mui-table-view-cell mui-media">
									<p class="color2">月参考率</p>
									<p class="color2 fontS16">{{latest.interestRate30}}%</p>
								</div>
								<div class="mui-col-sm-6  newListRight mui-col-xs-6 mui-table-view-cell mui-media">
									<p>最高额度</p>
									<p class="color3 fontS16">{{latest.averageqQuota}}元</p>
								</div>
							</div>
							<p class="people">{{latest.totalApplyCount}}人申请通过</p>
							<div class="hr"></div>
						</div>
					</li>
					</a> 
					</template>
					</template>
					<!--    8月22之前一版
					<li class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-table-view-cell mui-media hotTit" v-for="(latest,index) in latestList">
							<template v-if="(index+1) <= 4">
								<a  :href="'loanDetails.html?id='+latest.id">
									<img class="mui-media-object mui-pull-left" :src="latest.iconUrl">
									<div class="mui-media-body font-size14">
										{{latest.name}}
										<p class='mui-ellipsis'>最高额度<span class="color2">{{latest.averageqQuota}}元</span></p>
									</div>
								</a>
							</template>
						</div>
					</li> -->
				</ul>
			</div>
			<!-- <div class="mui-row tabBarBox">
				<li class="active fontS14" onclick="tabBar1()">
					<img src="resources/images/tab-bar11.png">
					<br> 首页
				</li>
				<li class="fontS14" onclick="tabBar2()">
					<img src="resources/images/tab-bar2.png">
					<br>贷款
				</li>
				<li class="fontS14" onclick="tabBar3()">
					<img src="resources/images/tab-bar3.png">
					<br>社区
				</li>
				<li class="fontS14" onclick="tabBar4()">
					<img src="resources/images/tab-bar4.png">
					<br>我的
				</li>
			</div>
			<div class="tabBarBottom"></div> -->
		</div>
		<script>
		var uid = window.localStorage.uid;
		var header={
		     	app_version:'1.1.1',
		     	app_model:'ios',
		     	token:'066995456465562'
		     }
		 
		 	var body= "";
		 	var model ="";
		 	var jdata="";	
				var vm = new Vue({
					el : '#app',
					data : {
						greenHandList:{},
						hotList:[],
						latestList:[],
						greenTags:[],
						swiperList:[],
						marqueeList:[]
					},
					created : function() {
						this.init();
					},
					methods : {
						init : function(){
							var that=this;
							/* 	新人专享 */
							body={
						    	type:'greenHand',
						    }
						    model={
						    	body:body,
						    	header:header,
						    }
						    jdata=JSON.stringify(model);
							$.ajax({
								url: 'homePage/getList',
								method: 'get',
								data:{
									'data':jdata
								},
								success: function(data){
									if(data !="" && data != null){
										var json=JSON.parse(data);
										that.greenHandList = json.data; 
										if(that.greenHandList[0].tags !="" && that.greenHandList[0].tags != undefined){
											var arr = that.greenHandList[0].tags.split(",");
											that.greenTags=arr;
										}	
									}
									
								},
								error: function(){
									mui.toast("请稍后再试!"); 
								}
							});
							/* 	热门推荐 */	
							body={
							    	type:'hot',
						    }
						    model={
						    	body:body,
						    	header:header,
						    }
						    jdata=JSON.stringify(model);
							$.ajax({
								url: 'homePage/getList',
								method: 'get',
								data:{
									'data':jdata
								},
								success: function(data){
									 var json=JSON.parse(data);
									 that.hotList = json.data; 
								},
								error: function(){
									mui.toast("请稍后再试!"); 
								}
							});
							/* 	新品推荐*/
							body={
							    	type:'latest',
						    }
						    model={
						    	body:body,
						    	header:header,
						    }
						    jdata=JSON.stringify(model);
							$.ajax({
								url: 'homePage/getList',
								method: 'get',
								data:{
									'data':jdata
								},
								success: function(data){
									 var json=JSON.parse(data);
									 that.latestList = json.data; 
								},
								error: function(){
									mui.toast("请稍后再试!"); 
								}
							});
							
							/* 轮播速报*/
						    model={
						    	header:header,
						    }
						    jdata=JSON.stringify(model);
							$.ajax({
								url: 'notice/getQuick',
								method: 'get',
								data:{
									'data':jdata
								},
								success: function(data){
									 var json=JSON.parse(data);
									 that.marqueeList = json.data; 
								},
								error: function(){
									mui.toast("请稍后再试!"); 
								}
							});
						},
						/* 搜索 */
						show:function(ev){
		                    if(ev.keyCode == 13){
		                    	var val = encodeURI($("#keyword").val());
		         			    if(val != ""){
		         			    	location.href="searchList.html?keyword="+val
		         				 }else{
		         					mui.toast('请输入您想要查询的内容');
		         				 }
		                    }
		                },
					},
					filters : {
						fmtDesc : function(){
							
							
						},
					}
				})
			
				var swiper = new Swiper('.swiper-container', {
				  slidesPerView: 1,
				  spaceBetween: 2,
				  loop: true,
				  pagination: {
				    el: '.swiper-pagination',
				    clickable: true,
				  },
				  navigation: {
				    nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				      },
				    }); 
				    
				    
			    $(document).scroll(function(){   //页面加载时，获取滚动条初始高度
				　　var distance = $(document).scrollTop();  //获取滚动条初始高度的值 ：0
				　　if(distance >= 130) {  //当滚动条高度为0时
						$(".headerScherBox").addClass("headerScherBox2").removeClass("headerScherBox");
						$(".headerMsg img").attr("src","resources/images/indexMsg1.png")	
					} else if(distance < 130){
						 $(".headerMsg img").attr("src","resources/images/indexMsg.png")	
					　　　　$(".headerScherBox2").addClass("headerScherBox").removeClass("headerScherBox2");  //添加某某css
					　}
				
				})
		</script>

	</body>

	</html>